<template>
	<view class="certificate area-b">
		<u-navbar  title="认证申请进度" :border-bottom="false" :title-bold="true"></u-navbar>
		<view class="info" v-if="!realMobile&&!realName&&!idCard" >
			<view class="circle">
				<view class="icon cuIcon-close text-red"></view>
			</view>
			<view class="u-m-t-30 u-font-36">
				实名认证失败
			</view>
			<view class="u-m-t-10 u-font-28 text-gray">
				实名信息认证失败
			</view>
		</view>
		<view class="info" v-else >
			<view class="circle">
				<view class="icon cuIcon-check text-green"></view>
			</view>
			<view class="u-m-t-30 u-font-36">
				实名认证成功
			</view>
			<view class="u-m-t-10 u-font-28 text-gray">
				实名信息认证后不可修改
			</view>
		</view>
		<view class="card">
			<view class="row">
				<view class="label">真实姓名：</view>
				<view class="content">{{realName}}</view>
			</view>
			<view class="row">
				<view class="label">手机号：</view>
				<view class="content">{{realMobile}}</view>
			</view>
			<view class="row">
				<view class="label">身份证号：</view>
				<view class="content">{{idCard}}</view>
			</view>
		</view>
		<view class="btn-group">
			<view v-if="!realMobile&&!realName&&!idCard" class="item bg-theme" @tap="again">
				重新认证
			</view>
			<view class="item bg-theme" @tap="goback">
				关闭
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		delay,
		goback
	} from "@/utils/util";
	import {mapGetters,mapActions} from "vuex"
	import {getRealResult} from "./api.js"
	export default {
		data() {
			return {
				realName:'',
				realMobile:'',
				idCard:''
			};
		},
		async onLoad() {
			getRealResult().then(({realName,realMobile,idCard})=>{
				this.realName =realName,
				this.realMobile =realMobile,
				this.idCard =idCard
			})
		},
		methods: {
			goback,
			again(){
				uni.redirectTo({
					url:'/pages/certificate/personal'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.info{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 140rpx;
		.circle{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: rgba($color:#cccccc, $alpha:0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				font-size: 80rpx;
			}
		}
	}
	.card{
		margin: 40rpx 30rpx 0rpx;
		background-color: #F5F6F7;
		color: #333333;
		padding: 30rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
		.row{
			display: flex;
			align-items: center;
		}
		.label{
			flex: 0 0 30%;
			color: #999999;
		}
		.content{

		}
	}
	.btn-group{
		margin: 50rpx 30rpx;
		.item{
			padding: 30rpx;
			border-radius: 10rpx;
			font-size: 32rpx;
			text-align: center;
			&+.item{
				margin-top: 20rpx;
			}
		}
	}
</style>
